<template>
  <div class="right-panel" v-if="schema">
    {{ schema ? schema.tag : "" }}
    <el-slider
      v-model="schema.props.span"
      :step="1"
      :max="24"
      show-stops
      v-if="isSpan"
    >
    </el-slider>
    <div class="form-item" v-if="isLabel">
      <span class="label">label:</span
      ><el-input v-model="schema.label"></el-input>
    </div>
    <div v-if="isField">
      <span class="label">field:</span
      ><el-input v-model="schema.name" @change="handleChangeName"></el-input>
    </div>
    <div>
      <span class="label">宽度:</span
      ><el-input v-model="schema.style.width"></el-input>
    </div>
    <div>
      <span class="label">高度:</span
      ><el-input v-model="schema.style.height"></el-input>
    </div>
    <div v-if="isShowLabel">
      <span class="label">是否展示label:</span>
      <el-switch
        v-model="schema.formItem"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>
    </div>
    <div v-if="schema.tag == 'aegle-table'">
      <div>表头设计</div>
      <el-button @click="handleAddHeder">新增表头</el-button>
      <div v-for="(item, i) in schema.data.column" :key="i">
        <span>名称</span><el-input v-model="item.label"></el-input>
        <span>字段</span><el-input v-model="item.prop"></el-input>
      </div>
    </div>

    <div >
      <span>事件绑定区</span>
      <el-button @click="handleAddEvent">新增事件</el-button>

      <div v-for="event in schema.events" :key="event.id">
        事件类型

        
        <el-select v-model="eventTypeIndex">
          <el-option
            v-for="event in eventTypeIndexMap"
            :key="event"
            :label="event"
            :value="event"
          >
          </el-option>
        </el-select>
        <el-select v-model="event.eventType">
          <el-option
            v-for="event in eventTypeMap"
            :key="event.value"
            :label="event.label"
            :value="event.value"
          >
          </el-option>
        </el-select>
        事件执行器
        <el-select v-model="event.eventActuator">
          <el-option
            v-for="event in eventActuator"
            :key="event.value"
            :label="event.label"
            :value="event.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>
<script>
import eventTypeMap, {eventTypeIndexMap} from "@/event/eventType";
import eventActuator from '@/event/eventActuator'
export default {
  props: {
    schema: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      eventTypeIndexMap,
      eventActuator,
      eventTypeIndex: null,
    };
  },
  computed: {
    isLabel() {
      if (this.schema) {
        if (Object.hasOwn(this.schema, "label")) {
          return true;
        }
      }

      return false;
    },
    isShowLabel() {
      if (this.schema) {
        if (Object.hasOwn(this.schema, "formItem")) {
          return true;
        }
      }

      return false;
    },
    isField() {
      if (this.schema && this.schema) {
        if (Object.hasOwn(this.schema, "name")) {
          return true;
        }
      }

      return false;
    },
    isSpan() {
      if (this.schema) {
        if (Object.hasOwn(this.schema.props, "span")) {
          return true;
        }
      }

      return false;
    },

    eventTypeMap() {
      if(!this.eventTypeIndex) {
        return [];
      }

      return eventTypeMap[this.eventTypeIndex]
    }
  },
  methods: {
    handleAddHeder() {
      this.schema.data.column.push({
        label: "",
        prop: "",
      });
    },
    handleChangeName(value) {
      const findModelMap = (schema) => {
        while (schema) {
          if (schema.modelMap) {
            return schema.modelMap;
          }
          schema = schema.parent;
        }
      };

      const modelMap = findModelMap(this.schema);
      if (modelMap) {
        modelMap[this.schema.id] = value;
      }
    },

    handleAddEvent() {
      if (!this.schema.events) {
        console.log("add");
        this.schema.events = [];
      }
      this.schema.events.push({
        eventName: "click",
        eventType: "openDialog",
        componentId: "aegle-form_1680159860789",
        id: `event-${+new Date()}`,
      });

      // this.schema.events.push({
      //   eventType: "",
      //   eventActuator: "",
      //   eventParams: {},
      //   eventId: `event-${+new Date()}`,
      // })
    },
  },
};

const eventMap = [
  {
    name: "click",
    label: "点击",
  },
];
</script>

<style lang="scss" scoped>
.right-panel {
  width: 200px;
}
.form-item {
  display: flex;
  align-items: center;

  .label {
    padding: 0 20px;
  }
}
</style>
